import {
    createTemplateText,
    createTemplateSelect,
    createTemplateInput,
    createTemplateControl,
    createTemplateAutocomplete,
    createTemplateSelectBox,
    createTemplateAutocompleteBox,
} from './../core/template';
/**
 * 字段父级类
 */
export default class Field {
    constructor(options) {
        this.$el = null;
        this.type = options.type;
        this.width = options.width;
        this.align = options.align;
        this.label = options.label;
        this.prop = options.prop;
        this.value = options.value;
        this.rowIndex = options.rowIndex;
        this.colIndex = options.colIndex;
        this.table = options.table;
        this.parent = this;
    }
    create() {
        switch (this.type) {
            case 'count':
                return createTemplateText(this, 'count');
            case 'text':
                return createTemplateText(this, 'text');
            case 'input':
                return createTemplateInput(this);
            case 'select':
                return createTemplateSelect(this);
            case 'control':
                return createTemplateControl(this);
            case 'autocomplete':
                return createTemplateAutocomplete(this);
            default:
                return createTemplateText(this);
        }
    }
    // 创建下拉容器
    createSelectBox() {
        // 创建select和autocomplete下拉容器
        const selectBoxTemplate = createTemplateSelectBox();
        const autocompleteBoxTemplate = createTemplateAutocompleteBox();
        this.table.$selectBox = $(selectBoxTemplate);
        this.table.$autocompleteBox = $(autocompleteBoxTemplate);
        // 插入dom
        this.table.$container.append(this.table.$selectBox);
        this.table.$container.append(this.table.$autocompleteBox);
    }
    // 检测下拉容器
    detectionSelectBox() {
        if (this.table.isHaveBox) return;
        this.table.isHaveBox = true;
        this.createSelectBox();
    }
    // 下拉处理
    dropDownProcessing(direction) {
        const itemHeight = 34; // 下拉项高度
        const itemsViewIndex = 6; // 可视下拉最大序号
        const itemsTotal = this.items.length; // 下拉项总个数
        if (this.listVisible && itemsTotal > 0) {
            // 获取对应下拉box
            const boxType = `$${this.type}Box`;
            const $box = this.table[boxType];
            const $list = $box.children('.list');
            // 按键-top（上）
            if (direction === 'top') {
                const $lis = $box.find('li');
                if (this.listCount <= 0) {
                    $lis.first().removeClass('active');
                    this.listCount = itemsTotal - 1;
                    $list.scrollTop(itemHeight * (itemsTotal - itemsViewIndex));
                } else {
                    this.listCount--;
                    if (this.listCount < itemsTotal - itemsViewIndex - 1) {
                        $list.scrollTop(itemHeight * this.listCount);
                    }
                }
                const $curLi = $lis.eq(this.listCount);
                $curLi.next().removeClass('active');
                $curLi.addClass('active');
            }
            // 按键-bottom（下）
            if (direction == 'bottom') {
                const $lis = $box.find('li');
                if (this.listCount < itemsTotal - 1) {
                    this.listCount++;
                    if (this.listCount > itemsViewIndex) {
                        $list.scrollTop(itemHeight * (this.listCount - itemsViewIndex));
                    }
                } else {
                    $lis.last().removeClass('active');
                    this.listCount = 0;
                    $list.scrollTop(0);
                }
                const $curLi = $lis.eq(this.listCount);
                $curLi.prev().removeClass('active');
                $curLi.addClass('active');
            }
            // 按键-enter
            if (direction === 'ok') {
                const element = $box.find('li.active').get(0);
                element && this.eventProcessing('check', element);
            }
        }  
    }
    // 事件绑定
    bindEvent() {
        // 由特定子类具体实现
    }
    // 解除事件绑定
    removeEvent() {
        // 由特定子类具体实现
    }
    // 更新指定项数据
    updateItemData(value) {
        // 由特定子类具体实现
        this.setSpecifiedItem(value);
    }
    // 禁用特定项
    disabledItem(disabled = true) {
        const inputEl = this.$el.children('input').get(0);
        if (disabled) {
            inputEl.setAttribute('disabled', 'disabled');
        } else {
            inputEl.removeAttribute('disabled');
        }
        this.disabled = disabled;
    }
}